<?php
header('content-type:text/html;charset=utf8');
require_once "../config.php";
require_once "../functions.php";

checkLogin();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Posts &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
</head>
<body>

  <div class="main">
    <?php
      $current_page = "posts";
    ?>
    <?php include_once "./public/_navbar.php" ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有文章</h1>
        <a href="post-add.php" class="btn btn-primary btn-xs">写文章</a>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        <form class="form-inline">
          <select name="" class="form-control input-sm" id="category">
            <option value="all">所有分类</option>
            
          </select>
          <select name="" class="form-control input-sm" id="status">
            <option value="all">所有状态</option>
            <option value="drafted">草稿</option>
            <option value="published">已发布</option>
            <option value="trashed">已删除</option>
          </select>
          <button class="btn btn-default btn-sm" id="btn-filt" type="button">筛选</button>
        </form>
        <ul class="pagination pagination-sm pull-right">
          
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          
        </tbody>
      </table>
    </div>
  </div>

  <?php include_once "./public/_aside.php"; ?>

  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="../static/assets/vendors/art-template/template-web.js"></script>
  <script type="text/template" id="tpl">
    {{each data}}
    <tr>
      <td class="text-center"><input type="checkbox"></td>
      <td>{{$value.title}}</td>
      <td>{{$value.nickname}}</td>
      <td>{{$value.name}}</td>
      <td class="text-center">{{$value.created}}</td>
      <td class="text-center">
        {{$value.status=='drafted'?'草稿':''}}
        {{$value.status=='published'?'已发布':''}}
        {{$value.status=='trashed'?'已作废':''}}
      </td>
      <td class="text-center">
        <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
        <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
      </td>
    </tr>
    {{/each}}
  </script>
</body>
</html>
<script>
//动态生成分页结构
var total;//总页数,现在不写死，由数据库得出来的
var size = 5;//只显示5条数据
var currentPage = 1;//当前页
var pageSize = 20;//每页的数量
var categoryId = 'all';//默认是all
var status = 'all';//默认是all
function renderPage(){
  if(currentPage <= Math.floor(size / 2)){
    var start = 1;
    var end = size;
  }else if(currentPage >= (total - Math.floor(size / 2))){
    var end = total;
    var start = end - 4;
  }else{
    var start = currentPage - 2;//开始页
    var end = currentPage + 2;//结束页
  }
  var html = "";
  html += '<li class="prev"><a href="javascript:;">上一页</a></li>';
  for(var i=start;i<=end;i++){
    if(i == currentPage){
      html += '<li class="item active"><a href="javascript:;">'+ i +'</a></li>';
    }else{
      html += '<li class="item"><a href="javascript:;">'+ i +'</a></li>';
    }
  }
  html += '<li class="next"><a href="javascript:;">下一页</a></li>';
  $('.pagination').html(html);
}
//上一页
$('.pagination').on("click",".prev",function(){
  if(currentPage == 1)return;
  currentPage--;
  renderPage();
  renderContent();
});
$('.pagination').on('click','.next',function(){
  if(currentPage == total)return;
  currentPage++;
  renderPage();
  renderContent();
})
$('.pagination').on('click','.item',function(){
  // console.log($(this).text())
  currentPage = $(this).text() - 0;
  // console.log(currentPage);
  renderPage();
  renderContent();
})
//请求后台，把文章数据请求出来，动态渲染表格结构
$(function(){
  //第一次请求，把数据请求回来
  renderContent();

  //筛选功能
  $.ajax({
    type: "post",
    url: "api/_getCategoryData.php",
    data: {},
    dataType: "json",
    success: function (res) {
      // console.log(res);
      if(res.code == 1){
        //遍历数组，生成多个下拉选项，追加到下拉框里面
        var data = res.data;
        var html = "";
        $.each(data,function(i,e){
          html += '<option value="'+e.id+'">'+e.name+'</option>';
        })
        $(html).appendTo($('#category'));
      }
    }
  });

  //点击筛选功能
  $('#btn-filt').on('click',function(){
    //点击筛选按钮的时候，获取下拉框的值，就把下拉框的值带回服务端,再根据下拉框的值完成sql语句的条件部分
    //把状态对应的值存储到option标签的value属性里面，点击的时候，直接获取整个value的属性就可以知道我们要的状态是哪个状态了

    //点击筛选的时候，先得到状态值
    // console.log($('#status').val())
    status = $('#status').val();
    //获取分类id
    categoryId = $('#category').val();
    $.ajax({
      type: "post",
      url: "api/_getPostsData.php",
      data: {currentPage:currentPage,pageSize:pageSize,status:status,categoryId:categoryId},
      dataType: "json",
      success: function (res) {
        // console.log(res);
        if(res.code == 1){
          var html = template('tpl',res);
          // console.log(html);
          $('tbody').html(html);
          renderPage();//只有知道了总页数才能渲染分页
        }
      }
    });
  })
});

function renderContent(){
  $.ajax({
    type: "post",
    url: "api/_getPostsData.php",
    data: {currentPage:currentPage,pageSize:pageSize,status:status,categoryId:categoryId},
    dataType: 'json',
    success: function (res) {
      // console.log(res);
      total = Math.ceil(res.num / pageSize);//数据的总条数得出总页数
      // console.log(total);
      if(res.code == 1){
        var html = template('tpl',res);
        // console.log(html);
        $('tbody').html(html);
        renderPage();//只有知道了总页数才能渲染分页
      }
    }
  });
}
</script>
